<template>
  <div class="log-display">
    <ul>
      <transition-group name="fade" tag="ul">
        <li v-for="(log, index) in logs" :key="index" class="log-item">
          {{ log }}
        </li>
      </transition-group>
    </ul>
  </div>
</template>

<script setup>
defineProps({
  logs: Array,
});
</script>

<style scoped>
.log-display {
  font-family: monospace;
  font-size: 14px;
}
.log-item {
  margin: 5px 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
